<template>
	<d2-container>
		<!-- 头部 -->
		<div slot="header">
			<el-row type="flex" class="row-bg" justify="space-between">
				<el-col :span="5">
					<div class="grid-content bg-purple">轮播图</div>
				</el-col>
				<el-col :span="3">
					<div class="grid-content bg-purple-light">
						<el-button type="primary" size="small " icon="el-icon-plus" @click="dialogVisible = true">添加</el-button>
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- 表格 -->
		<div>
			<template>
				<el-table stripe highlight-current-row style="width: 100%" :data="bannerData">
					<el-table-column type="index" width="50"></el-table-column>
					<el-table-column prop="updated_at" label="日期"></el-table-column>
					<el-table-column label="主图">
						<!-- 图片的显示 -->
						<template slot-scope="scope">
							<img :src="baseUrl+scope.row.imgurl" min-width="70" height="70" v-if="scope.row.imgurl!=null" />
						</template>
					</el-table-column>
					<el-table-column prop="name" label="banner名称"></el-table-column>
					<el-table-column prop="sort" label="排序" sortable></el-table-column>
					<el-table-column label="是否显示">
						<template slot-scope="scope">
							<el-tag type="danger" v-if="scope.row.state==1">是</el-tag>
							<el-tag v-if="scope.row.state==2">否</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="onBaUpdate(scope.row.id)">修改</el-button>
							<el-button type="text" size="small" @click="onBaDel(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<!-- 添加弹窗 -->
		<el-dialog title="轮播图" :visible.sync="dialogVisible" width="500px" :before-close="handleClose">
			<el-form label-width="100px" :model="form" ref="bannerForm">
				<el-form-item label="banner名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>

				<el-form-item label="排序" prop="sort">
					<el-input v-model="form.sort"></el-input>
				</el-form-item>
				<el-form-item label="是否显示">
					<el-switch v-model="show"></el-switch>
				</el-form-item>
				<el-form-item label="轮播图">
					<el-upload :action="getAction()" list-type="picture-card" :on-remove="handleRemove" :on-error="handlError"
					 :on-exceed="handlExceed" :on-success="hanlSuccess" :limit="1" :file-list="fileList">
						<i class="el-icon-plus"></i>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubBanner">确定</el-button>
					<el-button @click="handleClose">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog :visible.sync="dialogImageShow" width="400px" :modal="false"><img width="100%" :src="ImageUrl" alt="" /></el-dialog>
	</d2-container>
</template>

<script>
	import {
		getBanner,
		postBannerAdd,
		getBannerEdit,
		postBannerUpdate,
		getBannerDel
	} from '@/api/api'
	export default {
		data() {
			return {
				dialogVisible: false,
				form: {
					name: '',
					imgurl: '',
					sort: '',
				},
				show: false,
				// 上传图片
				dialogImageShow: false,
				ImageUrl: '',
				disabled: false,
				fileList: [], //图片路径
				fileImage: '',
				bannerData: [], //表格
				id: -1,
				baseUrl: process.env.VUE_APP_URL
			};
		},
		watch: {},
		mounted() {
			this.getBannerData()
		},
		methods: {
			//列表显示
			getBannerData() {
				getBanner().then(res => {
					if (res.state == 0) {
						this.bannerData = res.data

					}
				})
			},
			handleClose() {
				this.dialogVisible = false;
				this.fileList.length = 0;;
				this.form.name= ''
				this.form.imgurl= ''
				this.form.sort= ''
				this.show = false;
				this.$refs.bannerForm.resetFields();
			},
			//图片上传
			handleRemove(file, fileList) {
				//删除
				console.log(file, fileList);
				this.fileList = fileList;
				this.form.imgurl = '';
				console.log(this.fileList);
			},
			handlError(err, file, fileList) {
				console.log(err, file, fileList);
				this.$message.error('图片上传失败！');
			},
			handlExceed(files, fileList) {
				console.log(fileList);
				if (fileList.length >= 1) {
					this.$message.error('只能上传一张图片');
				}
			},
			hanlSuccess(res, file, FileList) {
				//成功
				this.form.imgurl = res.data[1]; //存路径上传的时候用
				// this.fileList[0]=res.data[1]
			},
			//确认提交
			onSubBanner() {
				if (this.show) {
					this.form.state = 1;
				} else {
					this.form.state = 2;
				}
				if (this.form.imgurl != '' && this.form.name != '') {
					if (this.id == -1) {
						postBannerAdd(this.form).then(res => {
							if (res.state == 0) {
								this.$message.success("添加成功！");
								this.dialogVisible = false;
								this.$refs.bannerForm.resetFields();
								this.getBannerData();
							}
						})
					} else {
						postBannerUpdate(this.form).then(res => {
							if (res.state == 0) {
								this.$message.success("修改成功！");
								this.dialogVisible = false;
								this.$refs.bannerForm.resetFields();
								this.getBannerData();
							}
						})
					}
				} else {
					this.$message.error("图片和名称不能为空!")
				}

			},
			//修改
			onBaUpdate(id) {
				console.log(this.fileList)
				getBannerEdit(id).then(res => {
					if (res.state == 0) {
						this.form = res.data;
						if (this.form.state = 1) {
							this.show = true;
						} else {
							this.show = false;
						}
						if (res.data.imgurl != null) {
							let str = this.baseUrl+ res.data.imgurl;
							let da = {
								url: str
							};
							this.fileList.push(da);
							console.log(this.fileList)
							// this.fileList=res.data.href.toString()+res.data.img_url.toString();
							this.fileImage = res.data.img_url;
						}
						this.id = id;
						this.dialogVisible = true;
					}
				})
			},
			//删除
			onBaDel(id) {
				this.$confirm('此操作将永久删除该轮播, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					getBannerDel(id).then(res => {
						if (res.state == 0) {
							this.$message.success("删除成功！");
							this.getBannerData();
						}
					})
				})

			},
			//返回图片 上传
			getAction() {
				if (process.env.NODE_ENV === "development") {
					return '/api/managea/Tphoto'
				} else {
					return '/managea/Tphoto'
				}
			}
		}
	};
</script>

<style></style>
